<template>
  <div v-skeleton class="page  page-tabbar page-root-self" :class="{'skeleton-transparent':!isPageLoad}">
    <div class="top-head">
      <div class="user-info">
        <div class="icon-wrap">
          <img v-lazy="userInfo.headImgUrl">
        </div>
        <div class="detail">
          <p class="nickname">{{userInfo.nickName || userInfo.phone}}</p>
        </div>

      </div>
      <router-link tag="i" to="/setting" class="icon-shezhi-copy iconfont setting"></router-link>
    </div>
    <div class="order-head">
      <div class="title-info">
        <p class="hint-title">我的订单</p>
        <router-link tag="p" to="/orderlist" class="all-title">查看全部订单 <i class="iconfont icon-icon"></i></router-link>
      </div>
      <ul class="status-all">
        <router-link tag="li" :to="{path:'/orderlist',query:item.query}"
                     v-for="(item,index) in orderStatusOptions"
                     :key="index">
          <i :class="item.class"></i>
          <p class="title">{{item.title}}</p>
        </router-link>
      </ul>
    </div>
    <ul class="menu-list">
      <li @click="$kefu()">
        <div class="menu-left">
          <i class="i-service"></i>
          <p class="title">客服中心</p>
        </div>
      </li>
      <router-link tag="li" to="/findpwd">
        <div class="menu-left">
          <i class="i-password"></i>
          <p class="title">修改密码</p>
        </div>
      </router-link>
      <router-link tag="li" to="/addresslist">
        <div class="menu-left">
          <i class="i-address"></i>
          <p class="title">地址管理</p>
        </div>
      </router-link>
      <li @click="clearCache">
        <div class="menu-left" >
          <i class="iconfont icon-qingchuhuancun"></i>
          <p class="title">清除缓存</p>
        </div>
      </li>
      <router-link tag="li" to="/about">
        <div class="menu-left">
          <i class="i-about"></i>
          <p class="title">关于我们</p>
        </div>
      </router-link>
    </ul>
    <p @click="signOut" class="sign-out-btn">退出账户</p>
  </div>
</template>
<script>
  import './scss/page.root.self.scss'
  import page from '../../mixins/page'

  export default {
    name: 'self',
    mixins: [page],
    data() {
      return {
        userInfo: {},
        orderStatusOptions: [
          {title: '待支付', query: {status: '0'}, class: 'wait_pay'},
          {title: '待收货', query: {status: '2'}, class: 'wait_recive'},
          {title: '已完成', query: {status: '3'}, class: 'wait_success'},
          {title: '退款售后', query: {status: '5'}, class: 'wait_reject'},
        ],
      }
    },
    methods: {
      signOut() {
        this.$dialog.confirm({
          title: '确认',
          message: '确定退出吗？'
        }).then(() => {
          localStorage.clear();
          this.$router.replace({path: '/'});
        }).catch(() => {
          // on cancel
        });
      },
      fetchPage() {
        this.$ajax.getMemberInfo().then().then(
          res => {
            this.userInfo = res.data;
            this.loadEnd();
          },
          err => {
            this.loadError();
          }
        )
      },
      clearCache(){
        const that = this;
        this.onPlusReady(function () {

          /*
          plus.cache.calculate( function ( size ) {
            that.$toast("Application cache size: " + size + " byte!" );
          });
          */

          plus.cache.clear( function () {
            that.$toast("清除缓存成功");
          });



        });
      }
    }
  }
</script>
